const path = require('path');

// 启动热更新 第 2 步,  导入已安装的webpack
const webpack = require('webpack');

//引入 插件
//作用： 1、使用插件之后，不需要手动链接 bundle.js文件
// 2、使用插件之后， 自动引用内存中的html页面
const htmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {// entry  入口   output  输出
    entry: path.join(__dirname,'./src/main.js'),// 需要打包的文件 入口
    output: {
        path: path.join(__dirname,'./dist'), //打包之后 输出到文件夹
        filename: 'bundle.js'// 打包好之后 生成的文件名
    },
    devServer:{
        open: 'chrome',
        // port: 3000,
        contentBase: 'src',
        hot: true   //热更新【只需要更新 用户更改的内容】 ---- 启动热更新 第 1 步
    },
    plugins: [// 配置插件的节点
        new webpack.HotModuleReplacementPlugin(),  //启动热更新 第 3 步,  new  热更新的模块
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),//需要创建的html模板路径
            filename: 'index.html'  // 在内存中创建的HTML页面
        }),
        new VueLoaderPlugin()

    ],
    module:{
        rules: [
            {test:/\.css$/, use:['style-loader','css-loader']},   //  use 中加载器执行的顺序， 右往左执行， 先执行css-loader 在执行style-loader
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},
            //limit 限制，限定 --用于指定图片的大小，  [name] 表示获取背景图片的名称，  [ext] 获取背景图片的后缀名，  [hash:5] 表示设置5位哈希编码
            {test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=64970&name=[hash:5]-[name].[ext]'},
            {test:/\.(ttf|svg|dot|woff|woff2|font|ttc|eot)$/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//exclude:/node_modules/ -- 表示排除node_modules文件夹中.js文件
            {test:/\.vue$/,use:'vue-loader'}

        ]
    },
    resolve:{
        alias:{ // 修改 vue导入的文件
            // "vue$": "vue/dist/vue.js"
        }
    }
}

